<template>
    <router-view class="style-light"></router-view>
    <div class="style-light all-sub-window">
        <!-- 退出登录询问框 -->
        <LogoutModel></LogoutModel>
        <!-- 取消限价订单确认框 -->
        <CancelLimitModel></CancelLimitModel>
        <!-- 左侧弹出市场列表选择框 -->
        <MarketLeftSelect></MarketLeftSelect>
        <!-- 出金入金 -->
        <!-- <DepositPage></DepositPage>
        <WithdrawPage></WithdrawPage> -->
        <!-- 语言选择 -->
        <Language></Language>
        <!-- 交易 -->
        <TradingModel></TradingModel>
        <StockCloseModel></StockCloseModel>
        <!-- 加载框 -->
        <LoadingModel></LoadingModel>
        <!-- Toast -->
        <Toast></Toast>
    </div>
</template>

<script setup>
// 所有弹窗的逻辑都放在这里
import LogoutModel from '@/components/sub_window/LogoutModel.vue';
import CancelLimitModel from './components/sub_window/CancelLimitModel.vue';
import MarketLeftSelect from '@/components/sub_window/MarketLeftSelect.vue';
// import DepositPage from '@/components/sub_window/DepositPage.vue';
// import WithdrawPage from '@/components/sub_window/WithdrawPage.vue';
import Language from '@/components/sub_window/Language.vue';
import TradingModel from '@/components/sub_window/TradingModel.vue';
import StockCloseModel from '@/components/sub_window/StockCloseModel.vue';
import LoadingModel from '@/components/sub_window/LoadingModel.vue';
import Toast from './components/sub_window/Toast.vue';

// 在全局控制 websocket 的连接
import { onMounted, onUnmounted } from 'vue';
import { history_ws, realtime_ws, closeAllConnection, marketService } from '@/service/market.js';
import { userService } from '@/service/user.js';

onMounted(async () => {
    // 获取公告信息
    userService.getNoticePopup();
    // 获取市场状态
    marketService.getMarketStatus();
    // 获取市场数据
    await marketService.getMarketList();
    // 建立 websocket 连接持续更新状态以及k线
    history_ws.init();
    realtime_ws.init();
    // 尝试登录获取到用户信息
    userService.getUserInfo();
});

onUnmounted(() => {
    // 断开所有 websocket 连接
    closeAllConnection();
});
</script>

<style scoped lang="less"></style>
